<template>
	<div>
		<el-collapse v-model="activeNames">
			<el-collapse-item title="基础参数" name="1">
				<baseFormStyle />
			</el-collapse-item>
			<el-collapse-item title="柱图样式" name="2">
				<barSimpleStyle :seriesConfig='seriesConfig'/>
			</el-collapse-item>
			<el-collapse-item title="折线样式" name="3">
          <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">粗细</p>
      <div class="col-2 attr-item-edit-input">
        <el-input-number size="mini" v-model="seriesLineConfig.lineStyle.width" controls-position="right" :min="0" />
        <div class="attr-item-edit-input-des">宽度 (px)</div>
      </div>
      <div class="col-3 attr-item-edit-input textRight">
        曲线平滑
      </div>
      <div class="col-3 attr-item-edit-input textLeft">
        <el-switch v-model="seriesLineConfig.smooth" size="mini">
        </el-switch>
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title"></p>
      <div class="col-1 attr-item-edit-input">
        <el-select v-model="seriesLineConfig.lineStyle.type" @change="throttleAddHistory" size="mini">
          <el-option  label="———————" value='solid'>——————</el-option>
          <el-option  label="--------------------" value='dashed'>----------</el-option>
          <el-option  label="························" value='dotted'>············ </el-option>

        </el-select>
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">数据点标记</p>
      <div class="col-2 attr-item-edit-input">
       <el-select v-model="seriesLineConfig.symbol" @change="throttleAddHistory" size="mini">
         <!-- 圆形、方形、三角形和菱形 -->
          <el-option  label="圆形" value='circle'>圆形</el-option>
          <el-option  label="方形" value='rect'>方形</el-option>
          <el-option  label="三角形" value='triangle'>三角形</el-option>
          <el-option  label="菱形" value='diamond'>菱形</el-option>
        </el-select>
      </div>
      <div class="col-2 attr-item-edit-input">
        <el-input-number size="mini" v-model="seriesLineConfig.symbolSize" controls-position="right" :min="0" />
      </div>
    </div>
			</el-collapse-item>
      <el-collapse-item title="X轴" name="4">
			 <xAxis :xAxisConfig='chartConfig' :division='false' />
			</el-collapse-item>
      <el-collapse-item title="Y轴" name="5">
			 <yAxis :yAxisData="yAxisData"/>
			</el-collapse-item>
      <el-collapse-item title="Y2轴" name="6">
			 <yAxis :yAxisData="y2AxisData"/>
			</el-collapse-item>
      <el-collapse-item title="动画设置" name="7">
        <animationConfig :animationConfig='chartConfig'/>
      </el-collapse-item>
		</el-collapse>
	</div>

</template>

<script>
	import {mapState, mapGetters} from 'vuex'
	import baseFormStyle from '../components/baseFormStyle'
	import barSimpleStyle from '../components/barSimpleStyle'
	import lineSimpleStyle from '../components/lineSimpleStyle'
	import yAxis from '../components/yAxis'
	import xAxis from '../components/xAxis'
	import animationConfig from '../components/animationConfig'


	export default {
		name: "attr-qk-lineSimpleColumnarForm",
		computed: {
			...mapState({
				projectData: state => state.editor.projectData,
				activePageUUID: state => state.editor.activePageUUID,
				activeElementUUID: state => state.editor.activeElementUUID,
				activeAttrEditCollapse: state => state.editor.activeAttrEditCollapse
			}),
			...mapGetters([
				'currentPageIndex',
				'activeElementIndex',
				'activeElement',
				'activePage'
			]),
      chartConfig(){
        return  this.activeElement.propsValue.lineSimpleColumnarForm
      },
      yAxisData(){
        return this.activeElement.propsValue.lineSimpleColumnarForm.yAxis[0]
      },
      y2AxisData(){
        return this.activeElement.propsValue.lineSimpleColumnarForm.yAxis[1]
      },
      seriesConfig(){
        return this.activeElement.propsValue.lineSimpleColumnarForm.series[0]
      },
      seriesLineConfig(){
      return this.activeElement.propsValue.lineSimpleColumnarForm.series[1]
    },
		},
		components: {
			baseFormStyle,
      barSimpleStyle,
			lineSimpleStyle,
      yAxis,
      xAxis,
      animationConfig
		},
		data() {
			return {
				activeNames: ['1'],
			}
		},
		watch: {
			activeNames() {
				this.$store.commit('updateActiveAttrEditCollapse', this.activeNames)
			}
		},
		mounted() {
			this.activeNames = this.activeAttrEditCollapse;
		},
		created() {
		},
    methods:{
      throttleAddHistory(){}
    }
	}
</script>
<style lang="scss" scoped>
  .sizeAndPosition-wrapper {
    display: flex;
    width: 100%;
  }

  .align-type-item {
    flex: 1;
    cursor: pointer;
    text-align: center;
    &.clearFlex {
      width: 42px;
      flex: none;
    }
    i {
      line-height: 1;
      display: inline-block;
      padding: 6px;
      border-radius: 4px;
      background: rgba(37, 165, 137, 0.08);
    }
    &:hover {
      i {
        color: white;
        background: $primary;
      }
    }
  }

  .attr-item-edit-wrapper {
    padding-left: 18px;
    display: flex;
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
    .attr-item-title {
      text-align: left;
      min-width: 60px;
      font-size: 12px;
    }
    .attr-item-edit-input {
      &.col-2 {
        width: 90px;
        margin-left: 10px;
      }
      &.col-1 {
        width: 250px;
      }
      &.col-3 {
        width: 60px;
        margin-left: 10px;
      }
      &.col-4 {
        width: 50px;
        margin-left: 10px;
      }
      .attr-item-edit-input-des {
        text-align: center;
        line-height: 1;
        margin-top: 2px;
        font-size: 12px;
        color: $gray;
      }
    }
  }
</style>
<style lang="scss">
.attr-item-edit-wrapper {
    padding-left: 18px;
    display: flex;
    width: 100%;
    // text-align: center;
    padding-bottom: 10px;
    .attr-item-title {
      text-align: left;
      min-width: 60px;
      font-size: 12px;
    }
    .attr-item-edit-input {
      &.col-2 {
        width: 90px;
        margin-left: 10px;
      }
      &.col-1 {
        width: 190px;
        margin-left: 10px;

      }
      &.col-3 {
        width: 60px;
        margin-left: 10px;
      }
      &.col-4 {
        width: 50px;
        margin-left: 10px;
      }
      .attr-item-edit-input-des {
        text-align: center;
        line-height: 1;
        margin-top: 2px;
        font-size: 12px;
        color: $gray;
      }
    }
  }
  .attr-item-edit-wrapper {
    .el-input-number.is-controls-right .el-input__inner {
      padding-left: 2px;
      padding-right: 32px;
      width: 90px;
    }
    .el-input-number--mini {
      width: 90px;
    }
    .el-slider__runway.show-input {
      margin-right: 108px;
    }
  }
</style>